<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <meta name="theme-color" content="#000000" />
    <meta
      name="description"
      content="Web site created using create-react-app"
    />
    <link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" />
    <!--
      manifest.json provides metadata used when your web app is installed on a
      user's mobile device or desktop. See https://developers.google.com/web/fundamentals/web-app-manifest/
    -->
    <link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
    <!--
      Notice the use of %PUBLIC_URL% in the tags above.
      It will be replaced with the URL of the `public` folder during the build.
      Only files inside the `public` folder can be referenced from the HTML.

      Unlike "/favicon.ico" or "favicon.ico", "%PUBLIC_URL%/favicon.ico" will
      work correctly both with client-side routing and a non-root public URL.
      Learn how to configure a non-root public URL by running `npm run build`.
    -->
    <title>上海实验室</title>
    <style>
      #version-tips-warp {
        position: absolute;
        height: 100%;
        widows: 100%;
        left: 0;
        top: 0;
        background-color: rgba(0, 0, 0, 0.5);
        display: none;
        line-height: 1.5715;
      }
      #version-tips {
        margin: 0 auto;
        width: 520px;
        position: relative;
        top: 100px;
        background-color: rgba(255, 255, 255,1);
      }
      #version-tips-header {
        padding: 16px 24px;
        color: rgba(0, 0, 0, .65);
        background: #fff;
        border-bottom: 1px solid #f0f0f0;
        font-size: 16px;
      }
      #version-tips-body {
        color: rgba(0, 0, 0, .65);
        padding: 28px;
        font-size: 14px;
        line-height: 1.5715;
        border-bottom: 1px solid #f0f0f0;
      }
      #version-tips-body>p {
        margin: 5px;
      }
      #version-tips-footer {
        padding: 10px 16px;
      }
      .version-tips-footer-button {
        padding: 5px 12px;
        border: 1px solid #f0f0f0;
        border-radius: 2px;
        font-size: 15px;
        cursor: pointer;
        line-height: 1.5715;
      }
    </style>
  </head>
  <body>
    <noscript>You need to enable JavaScript to run this app.</noscript>
    <div id="root"></div>
    <!--
      This HTML file is a template.
      If you open it directly in the browser, you will see an empty page.

      You can add webfonts, meta tags, or analytics to this file.
      The build step will place the bundled scripts into the <body> tag.

      To begin the development, run `npm start` or `yarn start`.
      To create a production bundle, use `npm run build` or `yarn build`.
    -->
    <div id="version-tips-warp">
      <div id="version-tips">
        <div id="version-tips-header">
          <span>提示</span>
          <span style="float: right; cursor: pointer;" 
            onclick="closeVersionTips()">关闭</span>
        </div>
        <div id="version-tips-body">
          <p>浏览器版本过低，请下载最新浏览器</p>
          <div style="cursor: pointer;" onclick="noTips()">
            <img id="no-tips-img" src="./unchecked.png"
              style="width: 14px; height: 14px; margin-right: 6px; margin-top: -7px">
              不再提示
          </div>
        </div>
        <div id="version-tips-footer">
          <button class="version-tips-footer-button"
            style="background-color: #4c80ff; color: white;" onclick="downloadChrome()">去下载chrome</button>
          <button class="version-tips-footer-button" onclick="closeVersionTips()">取消</button>
        </div>
      </div>
    </div>

    <script>
      // 谷歌版本
      function getChromeVersion() {
        var arr = navigator.userAgent.split(' ');
        var chromeVersion = '';
        for (var i=0; i<arr.length; i++) {
          if (/chrome/i.test(arr[i])) {
            chromeVersion = arr[i]
          }
        }

        if (chromeVersion) {
          return Number(chromeVersion.split('/')[1].split('.')[0]);
        } else {
          return false;
        }
      }

      // 获取IE版本
      function getIEVersion() {
        var userAgent = navigator.userAgent;
        var isIE = userAgent.indexOf('compatible') > -1 && userAgent.indexOf("MSIE") > -1 // 判断是否IE<11
        var isEdge = userAgent.indexOf('Edge') > -1 && !isIE; // 判断是否为IE的Edge浏览器
        var isIE11 = userAgent.indexOf('Trident') > -1 && userAgent.indexOf('rv:11.0') > -1
        if (isIE) {
          var reIE = new RegExp("MSIE (\\d+\\.\\d+);");
          reIE.test(userAgent);
          var fIEVersion = parseFloat(RegExp["$1"]);
          if (fIEVersion == 7) {
            return 7;
          } else if (fIEVersion == 8) {
            return 8;
          } else if (fIEVersion == 9) {
            return 9;
          } else if (fIEVersion == 10) {
            return 10;
          } else {
            return 6; // IE版本<=7
          }
        } else if (isEdge) {
          return 'edge'
        } else if (isIE11) {
          return 11
        } else {
          return false; // 不是IE浏览器
        }
      }

      function closeVersionTips() {
        document.getElementById('version-tips-warp').style.display = 'none'
      }

      function showVersionTips() {
        if (!!window.sessionStorage.getItem("mcmweb_not_version_tips")) {
          return
        }
        if (!window.localStorage.getItem("mcmweb_not_version_tips")) {
          document.getElementById('version-tips-warp').style.display = 'block'
          window.sessionStorage.setItem('mcmweb_not_version_tips', true)
        }
      }

      function downloadChrome() {
        window.open("https://www.google.cn/chrome/", "_blank")
      }

      function noTips() {
        if (!!window.localStorage.getItem('mcmweb_not_version_tips')) {
          window.localStorage.removeItem("mcmweb_not_version_tips");
          document.getElementById("no-tips-img").src="./unchecked.png"
        }else {
          window.localStorage.setItem("mcmweb_not_version_tips", true);
          document.getElementById("no-tips-img").src="./checked.png"
        }
      }

      if (getChromeVersion() && (getChromeVersion() < 64)) {
        showVersionTips();
      }
      if (getIEVersion() && (getIEVersion() != "11")) {
        showVersionTips()
      }
    </script>
  </body>
</html>
